#links {
	.links-content {
		margin-top: 1rem;
	}

	.link-navigation {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.card {
		// width: 300px;
		font-size: 1.1em;
		padding: 10px 20px;
		border-radius: 4px;
		transition-duration: 0.15s;
		margin-bottom: 1rem;
		display: flex;
		flex-basis: 200px;
		flex-grow: 1;

		&:hover {
			transform: scale(1.1);
			box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

			@media (prefers-color-scheme: dark) {
				background-color: #282828;
			}
		}

		a {
			border: none;
		}

		.ava {
			width: 3rem !important;
			height: 3rem !important;
			margin: 0 !important;
			margin-right: 1em !important;
			border-radius: 50%;
			transition: transform 1s ease-out;
		}

		.card-header {
			font-style: italic;
			overflow: hidden;
			width: 236px;

			a {
				font-style: normal;
				color: #2bbc8a;
				font-weight: bold;
				text-decoration: none;

				&:hover {
					color: #d480aa;
					text-decoration: none;
				}
			}

			.info {
				font-style: normal;
				color: #a3a3a3;
				font-size: 14px;
				min-width: 0;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
	}

	span.focus-links {
		vertical-align: 1px;
		font-style: normal;
		margin-left: 10px;
		position: unset;
		left: 0;
		padding: 0 7px 0 5px;
		font-size: 11px;
		border-color: #42c02e;
		border-radius: 40px;
		line-height: 24px;
		height: 24px;
		color: #fff !important;
		background-color: #2bbc8a;
		display: inline-block;

		&:hover {
			background-color: #318024;
		}
	}
}
